<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>管理页面-图书管理</title>
    <style>
        textarea{width: 200px;
            height: 350px;
            max-width: 200px;
            max-height: 350px;
        }
        .el-header {
            background-color: rgba(63, 157, 254, 0.99);
            line-height: 50px;
        }
        .el-aside {
            color: rgb(238, 241, 246)
        }
        .el-main{

        }
        .el-table .warning-row {
            background: oldlace;
        }

        .el-table .success-row {
            background: #f0f9eb;
        }

        .avatar-uploader .el-upload {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
            height: 240px !important;
            width: 200px !important;
        }
        .avatar-uploader .el-upload:hover {
            border-color: #409EFF;
        }
        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            text-align: center;
            width: 178px;
            height: 178px;
            line-height: 178px;
        }
        .avatar {
            display: block;
            width: 200px;!important;
            height: 240px;!important;
        }
        .a1{
            display: flex;
            justify-content: center;!important;
             align-items: center;!important;
            margin-top: 25px;
        }
    </style>
</head>
<body>
    <div id="app">
        <!--顶部信息栏-->
        <hr style="border-width: 3px;background-color: rgba(63,157,254,0.96);border-color: rgba(63,157,254,0.96);border-style: solid">
        <el-row>
            <el-col :span="6">
                <img src="../img/logo.png" height="100" width="250" style="text-align:left;margin-left: -20px">
            </el-col>
            <el-col :span="12">
                <span class="a1" style="color:#2e2e2f;font-size:40px;">淘书网后台管理</span>
            </el-col>
            <el-col :span="6">
            <el-button type="text" style="color: #666;position: absolute; bottom: 10px;right:10px;" @click="killSession">退出登录</el-button>
                <span style="color: #666;font-size:15px;float: right;margin-top:20px">管理员:{{Admin.adminName}}</span>
            </el-col>
        </el-row>
        <hr style="border-width: 3px;background-color: rgba(63,157,254,0.96);border-color: rgba(63,157,254,0.96);border-style: solid">
        <el-container style=" border: 0px solid #eee">
        <!--左侧导航栏-->
            <el-aside width="250px" style="background-color: rgb(253,253,254);">
                <el-col style="width:250px">
                    <el-menu
                            default-active="1"
                            class="el-menu-vertical-demo"
                            @open="handleOpen"
                            @close="handleClose">
                        <el-menu-item index="1" @click="jumpToBookManage">
                            <i class="el-icon-reading" index="1" style="font-size:20px"></i>
                            <span slot="title"style="font-size:20px">图书管理</span>
                        </el-menu-item>
                        <el-menu-item index="2" @click="jumpToUserManage">
                            <i class="el-icon-user" style="font-size:20px"></i>
                            <span slot="title" style="font-size:20px">用户管理</span>
                        </el-menu-item>
                        <el-menu-item index="3" @click="jumpToOrdersManage">
                            <i class="el-icon-document" style="font-size:20px"></i>
                            <span slot="title" style="font-size:20px">订单管理</span>
                        </el-menu-item>
                        <el-menu-item index="4" @click="jumpToCategoryManage">
                            <i class="el-icon-menu" style="font-size:20px"></i>
                            <span slot="title" style="font-size:20px">分类管理</span>
                        </el-menu-item>
                        <el-menu-item index="4" ></el-menu-item>
                        <el-menu-item index="4" ></el-menu-item>
                        <el-menu-item index="4" ></el-menu-item>
                        <el-menu-item index="4" ></el-menu-item>
                        <el-menu-item index="4" ></el-menu-item>
                        <el-menu-item index="4" ></el-menu-item>
                        <el-menu-item index="4" ></el-menu-item>
                        <el-menu-item index="4" ></el-menu-item>
                        <el-menu-item index="4" ></el-menu-item>
                        <el-menu-item index="4" ></el-menu-item>
                        <el-menu-item index="4" ></el-menu-item>
                    </el-menu>
                </el-col>
            </el-aside>
            <el-main>
                <!--搜索表单-->
                <el-form ref="searchForm" :inline="true" :model="searchDialog" class="demo-form-inline" >
                    <el-form-item label="当前状态">
                        <el-select v-model="searchDialog.status" placeholder="Status">
                            <el-option label="已上架" style="color: #5daf34" value="1"></el-option>
                            <el-option label="已下架" style="color: red" value="-1"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="书籍名称">
                        <el-input v-model="searchDialog.bookName" placeholder="Name"></el-input>
                    </el-form-item>
                    <el-form-item label="书籍编号">
                        <el-input v-model="searchDialog.bookId" placeholder="ID"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" icon="el-icon-search" @click="onSubmit">搜索</el-button>
                        <el-button type="success" icon="el-icon-refresh" @click="resetSearch">重置</el-button>
                    </el-form-item>
                </el-form>
                <el-row>
                    <el-button type="info" :style="{ display: visibleManage }" @click="manage">管理</el-button>
                    <el-button type="info" plain :style="{ display: visibleNoManage }" @click="nomanage">取消</el-button>
                    <el-button type="success" plain :style="{ display: visibleUp }" @click="upByIds">上架</el-button>
                    <el-button type="danger" plain :style="{ display: visibleDown }" @click="downByIds">下架</el-button>
                    <el-button type="danger"  @click="deleteByIds" :style="{ display: visibleCancel }">删除</el-button>
                    <el-button type="primary" plain :style="{ display: visibleNew }" @click="addDialogVisible = true" >新增</el-button>
                </el-row>
                <!--新增对话框-->
                <el-dialog
                        title="新增书籍"
                        :visible.sync="addDialogVisible"
                        width="50%"
                        @close="dialogClose"
                        >
                    <el-form ref="addForm" :model="addDialog" label-width="80px" :rules="rules1">
                        <el-row>
                            <el-col :span="10">
                                <el-form-item style="height: 230px">
                                    <el-upload
                                            action="/file/upload"
                                            :limit="1"
                                            class="avatar-uploader"
                                            :show-file-list="false"
                                            :on-success="handleAvatarSuccess"
                                            :before-upload="beforeAvatarUpload"
                                    >
                                        <img v-if="imageUrl" :src="imageUrl" class="avatar">
                                        <i class="el-icon-plus" style="margin-top: 110px"></i>
                                    </el-upload>
                                </el-form-item>
                            </el-col>
                            <el-col :span="14">
                                <el-row>
                                    <el-col :span="20">
                                        <el-form-item label="编号:" prop="bookId">
                                            <el-input v-model="addDialog.bookId"></el-input>
                                        </el-form-item>
                                    </el-col >
                                </el-row>
                                <el-row>
                                    <el-col :span="20">
                                        <el-form-item label="书名:" prop="bookName">
                                            <el-input v-model="addDialog.bookName"></el-input>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-row>
                                    <el-col :span="20">
                                        <el-form-item label="作者:" prop="author">
                                            <el-input v-model="addDialog.author"></el-input>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-row>
                                    <el-col :span="10">
                                        <el-form-item label="单价:" prop="price">
                                            <el-input v-model="addDialog.price"></el-input>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="10">
                                        <el-form-item label="库存:" prop="inventory">
                                            <el-input v-model="addDialog.inventory"></el-input>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-form-item label="分类">
                                    <el-cascader
                                            :props="categoryProps"
                                            v-model="addDialog.category"
                                            >
                                    </el-cascader>
                                </el-form-item>
                                <el-form-item label="是否上架" prop="status">
                                    <el-switch v-model="addDialog.status"
                                               active-value="1"
                                               inactive-value="-1">
                                    </el-switch>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="22">
                                <el-form-item style="text-align: center">
                                    <el-button type="primary" @click="addBook('addForm')" >确 定</el-button>
                                    <el-button @click="addDialogVisible = false" >取 消</el-button>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                </el-dialog>
                <!--       修改对话框        -->
                <el-dialog
                        title="修改书籍"
                        :visible.sync="editDialogVisible"
                        width="50%"
                        @close="dialogClose">
                    <el-form ref="editForm" :model="editDialog" label-width="80px" :rules="rules2">
                       <el-row>
                            <el-col :span="14">
                                <el-row>
                                    <el-col :span="20">
                                        <el-form-item label="编号:" prop="bookId">
                                            <el-input v-model="editDialog.bookId" disabled></el-input>
                                        </el-form-item>
                                    </el-col >
                                </el-row>
                                <el-row>
                                    <el-col :span="20">
                                        <el-form-item label="书名:" prop="bookName">
                                            <el-input v-model="editDialog.bookName"></el-input>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-row>
                                    <el-col :span="20">
                                        <el-form-item label="作者:" prop="author">
                                            <el-input v-model="editDialog.author"></el-input>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-row>
                                    <el-col :span="20">
                                        <el-form-item label="分类">
                                            <el-cascader
                                                    :props="categoryProps"
                                                    v-model="editDialog.category"
                                            >
                                            </el-cascader>
                                         </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-row>
                                    <el-col :span="10">
                                        <el-form-item label="单价:" prop="price">
                                            <el-input v-model="editDialog.price"></el-input>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="10">
                                        <el-form-item label="库存:" prop="inventory">
                                            <el-input v-model="editDialog.inventory"></el-input>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-form-item label="是否上架">
                                    <el-switch v-model="editDialog.status"
                                               :active-value="1"
                                               :inactive-value="-1">
                                    </el-switch>
                                </el-form-item>
                            </el-col>
                           <el-col :span="10">
                               <el-form-item label="简介:" prop="introduction">
                                   <el-input type="textarea" v-model="editDialog.introduction"></el-input>
                               </el-form-item>
                           </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="22">
                                <el-form-item style="text-align: center">
                                    <el-button type="primary" @click="updateBook('editForm')" >确 定</el-button>
                                    <el-button @click="editDialogVisible = false" >取 消</el-button>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                </el-dialog>
                <!-- 修改图片 -->
                <el-dialog
                        title="更换图片"
                        :visible.sync="bookImgDialogVisible"
                        width="30%">
                    <el-form ref="bookImgForm" :model="formData" style="width: 300px">
                        <el-form-item style="height: 230px" align="center">
                            <div style="margin-left:26%">
                            <el-upload
                                        action="/file/upload"
                                        class="avatar-uploader"
                                        :show-file-list="false"
                                        :on-change="onChange"
                                        :on-success="handleAvatarSuccess"
                                        :before-upload="beforeAvatarUpload">
                                    <img  :src="imageUrl" class="avatar">
                                    <i class="el-icon-plus" style="margin-top: 110px"></i>
                                </el-upload>
                            </div>
                        </el-form-item>
                        <el-form-item>
                            <div style="margin-left:30%;margin-top:50px">
                                <el-button  type="primary"  @click="updateBookImg('bookImgForm')">确认</el-button>
                                <el-button   @click="bookImgDialogVisible = false">取消</el-button>
                            </div>
                        </el-form-item>
                    </el-form>
                </el-dialog>
                <!--表格-->
                <template>
                    <el-table
                            v-loading="loading"
                            :data="tableData"
                            style="width: 100%"
                            :row-class-name="tableRowClassName"
                            @selection-change="handleSelectionChange">
                        <el-table-column
                                align="center"
                                type="selection"
                                width="55">
                        </el-table-column>
                        <el-table-column
                                align="center"
                                prop="bookId"
                                label="编号">
                        </el-table-column>
                        <el-table-column
                                align="center"
                                label="图片(点击更换)">
                            <template slot-scope="scope">
                                <img style="width: 100px; height: 100px;cursor: pointer"
                                     :src="scope.row.bookImg"
                                     @click="echoBookImg(scope.row)">
                            </template>
                        </el-table-column>
                        <el-table-column
                                align="center"
                                prop="bookName"
                                label="书名">
                        </el-table-column>
                        <el-table-column
                                align="center"
                                prop="categoryName"
                                label="分类">
                        </el-table-column>
                        <el-table-column
                                align="center"
                                prop="author"
                                label="作者">
                        </el-table-column>
                        <el-table-column
                                align="center"
                                prop="introduction"
                                :show-overflow-tooltip="true"
                                label="简介">
                        </el-table-column>
                        <el-table-column
                                align="center"
                                prop="price"
                                label="单价">
                        </el-table-column>
                        <el-table-column
                                align="center"
                                prop="inventory"
                                label="库存">
                        </el-table-column>
                        <el-table-column
                                align="center"
                                prop="status"
                                label="书本状态" >
                            <template slot-scope="Book">
                                <span v-if="Book.row.status == '1'" style="color: #5daf34">已上架</span>
                                <span v-if="Book.row.status == '-1'" style="color: red">已下架</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                                align="center"
                                label="操作">
                            <template slot-scope="scope">
                                <el-button type="primary" icon="el-icon-edit" circle  @click="echo(scope.row)"></el-button><!--修改-->
                                <el-button type="danger" icon="el-icon-delete" circle @click="deleteById(scope.row)"></el-button><!--删除-->
                            </template>
                        </el-table-column>
                    </el-table>
                </template>
                <!--分页工具条-->
                    <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="currentPage"
                            :page-sizes="[5, 10, 15, 20]"
                            :page-size="5"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="totalCount"
                           >
                    </el-pagination>
            </el-main>
        </el-container>
    </div>
    <!-- 引入组件库 -->
    <script src="../js/vue.js"></script>
    <script src="../element-ui/lib/index.js"></script>
    <link rel="stylesheet" href="../element-ui/lib/theme-chalk/index.css">
    <script src="../js/axios-0.18.0.js"></script>
    <script type="text/javascript" src="js/jquery.min.js"></script>

    <script>
    new Vue({
        el:"#app",
        mounted() {
            //页面加载完成后，发送异步请求，获取所有数据
            this.loading=false;
            this.selectByPageAndCondition();
            this.getAdmin();
        },
        methods: {
            getAdmin(){
                axios({
                    method:"get",
                    url:"/admin",
                }).then(resp =>{
                    this.Admin = resp.data;
                    console.log(this.Admin);
                    if (this.Admin!== null && this.Admin !== ""&& this.Admin !==undefined) {

                    }else{this.Admin={adminName:null}}
                })
            },
            killSession() {//退出登录
                this.$confirm('确认退出登录, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    //发送ajax请求
                    axios.get("/admin/logout").then((res) => {
                    })
                    this.$message({
                        message: '退出成功',
                        type: 'success'
                    });
                    window.location.href = "/login_page/login.html"
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消'
                    });
                });
            },

            handleOpen(key, keyPath) {
                console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
                console.log(key, keyPath);
            },
            //查询搜索条件内容
            selectByPageAndCondition() {
                var _this = this;
                axios({
                    method: "post",
                    url: "/book/page?currentPage="
                        + _this.currentPage + "&pageSize=" + _this.pageSize,
                    data: _this.searchDialog
                }).then(function (resp) {
                    //设置表格数据
                    _this.tableData = resp.data.items;
                    //设置表格总记录数
                    _this.totalCount = resp.data.totalCount;
                })
            },

            tableRowClassName({row, rowIndex}) {
                if (rowIndex === 1) {
                    return 'warning-row';
                } else if (rowIndex === 3) {
                    return 'success-row';
                }
                return '';
            },
            //复选框
            handleSelectionChange(val) {
                this.multipleSelection = val;
                console.log(this.multipleSelection)
            },
            //每页条数
            handleSizeChange(val) {
                this.pageSize = val;
                this.selectByPageAndCondition();
                // console.log(`每页 ${val} 条`);
            },
            //当前页数
            handleCurrentChange(val) {
                this.currentPage = val;
                this.selectByPageAndCondition();
                // console.log(`当前页: ${val}`);
            },
            //查询方法
            onSubmit() {
                console.log(this.searchDialog);
                this.currentPage = 1;//每次查询回到页码到第一页
                this.selectByPageAndCondition();
            },

            //新增方法
            addBook(formName) {
                this.$refs[formName].validate((valid) => {
                    this.addDialog.mt=this.addDialog.category[0]
                    this.addDialog.st=this.addDialog.category[1]
                    if (valid) {
                        var _this = this;
                        this.addDialog.categoryName=this.getCategoryById(this.addDialog.mt,this.addDialog.st);
                        //发送ajax请求，添加数据
                        axios({
                            method: "put",
                            url: "/book",
                            data: _this.addDialog
                        }).then(function (resp) {
                            if (resp.data.code == "1") {
                                _this.$message({
                                    message: '添加成功!',
                                    type: 'success'
                                });
                                //清空重置
                                _this.resetAdd();
                                //成功后，关闭窗口
                                _this.addDialogVisible = false;
                                //更新表格数据
                                _this.selectByPageAndCondition();
                            }
                        })
                    }else {
                        this.$message({
                            message: '信息填写错误',
                            type: 'error'
                        })
                    }
                })
            },
            //回显修改信息
            echo(val) {
                var _this = this;
                _this.editDialogVisible= true;
                /**
                 * 采用深拷贝，引用类型，不会改变表单原始数据
                 * @type {any}
                 */
                _this.editDialog = JSON.parse(JSON.stringify(val));
                _this.editDialog.category=[ _this.editDialog.mt,_this.editDialog.st]
                console.log(_this.editDialog)
                // _this.Book1=val;浅拷贝赋值的是地址D，值发送变化，表单也会发生变化

            },
            echoBookImg(val){
                var _this = this;
                _this.bookImgDialogVisible= true;
                _this.formData = JSON.parse(JSON.stringify(val));
                this.imageUrl=val.bookImg;
            },
            //修改书籍
            async updateBook(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.$confirm('确认是否修改该书籍, 是否继续?', '提示', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            type: 'warning'
                        }).then(async () => {
                            var _this = this;
                            this.editDialog.mt = this.editDialog.category[0]
                            this.editDialog.st = this.editDialog.category[1]
                            let response = await axios.get("/category/"+ this.editDialog.mt+ "/"+ this.editDialog.st)
                            console.log(response)
                            this.editDialog.categoryName=response.data
                            //发送ajax请求，修改数据
                            axios({
                                method: "post",
                                url: "/book",
                                data: _this.editDialog
                            }).then(function (resp) {
                                if (resp.data.code == "1") {
                                    _this.selectByPageAndCondition();
                                    _this.editDialogVisible = false;
                                    _this.$message({
                                        type: 'success',
                                        message: '修改成功!'
                                    });
                                }
                            })
                        })
                    }else
                    {
                        this.$message({
                            message: '已取消修改!',
                            type: 'info'
                        })
                    }
                })
            },

            //更改图片
            updateBookImg(formName){
                var _this=this;
                axios.post("/book/image",
                    _this.formData).then((res) => {
                    if (res.data.code =="1") {
                        //修改成功
                        // 弹出消息提示
                        setTimeout(this.$message({
                            message:"封面修改成功",
                            type: 'success'
                        }));
                        console.log(this.formData);
                        _this.selectByPageAndCondition();
                        _this.bookImgDialogVisible = false;
                        this.$refs[formName].resetFields();
                    }
                })
            },
            //删除单条数据
            deleteById(row) {
                this.id = row.id
                this.$confirm('确认是否删除该书本, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    var _this = this;
                    axios({
                        method: "delete",
                        url: "/book",
                        data: [this.id]
                    }).then(function (resp) {
                        if (resp.data.code == "1") {//删除成功
                            // 重新查询数据
                            _this.selectByPageAndCondition();

                            _this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            //批量删除数据
            deleteByIds() {
                console.log(this.multipleSelection)
                //获取选择的id数组
                for(let i=0;i<this.multipleSelection.length;i++){
                    let selectionElement=this.multipleSelection[i];
                    this.selectIds[i]=selectionElement.id
                }

                this.$confirm('确认是否删除所选书本, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    var _this = this;

                    axios({
                        method: "delete",
                        url: "/book",
                        data:_this.selectIds
                    }).then(function (resp) {
                        if (resp.data.code == "1") {//删除成功
                            // 重新分页数据
                            _this.selectByPageAndCondition();

                            _this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            //批量上架
            upByIds(){
                let status=1;
                //获取选择的id数组
                for (let i = 0; i < this.multipleSelection.length; i++) {
                    this.multipleSelection[i].status =  status ;
                };
                for(let i=0;i<this.multipleSelection.length;i++){
                    let selectionElement=this.multipleSelection[i];
                    this.selectIds[i]=selectionElement.id
                }
                var _this = this;
                axios({
                    method: "post",
                    url: "/book/up",
                    data:_this.selectIds
                }).then(function (resp) {
                    if (resp.data.code == "1") {//上架成功
                        console.log("成功")
                        // 重新查询数据
                        _this.selectByPageAndCondition();
                        _this.$message({
                            type: 'success',
                            message: '已上架！'
                        });
                    }
                })
            },
            //批量下架
            downByIds(){
                let status=-1;
                //获取选择的id数组
                for (let i = 0; i < this.multipleSelection.length; i++) {
                    this.multipleSelection[i].status =  status ;
                };
                //获取选择的id数组
                for(let i=0;i<this.multipleSelection.length;i++) {
                    let selectionElement = this.multipleSelection[i];
                    this.selectIds[i] = selectionElement.id
                }
                var _this = this;
                axios({
                    method: "post",
                    url: "/book/down",
                    data:_this.multipleSelection
                }).then(function (resp) {
                    if (resp.data.code == "1") {//下架成功
                        // 重新查询数据
                        _this.selectByPageAndCondition();
                        _this.$message.error({
                            type: 'success',
                            message: '已下架!'
                        });
                    }
                })
            },
            //上传成功
            handleAvatarSuccess(res, file) {
                this.imageUrl = URL.createObjectURL(file.raw);
                console.log(this.imageUrl)
                this.formData.bookImg=res.data
            },
            onChange(file, list) {
                if (list.length > 1 && file.status !== "fail") {
                    list.splice(0, 1);
                } else if (file.status === "fail") {
                    list.splice(0, 1);
                }
            },
            //上传条件判断
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            },
            dialogClose(){
                this.imageUrl='';
            },
            //重置添加框
            resetAdd() {
                if (this.$refs.addForm !== undefined){
                    this.$refs.addForm.resetFields();
                };
            },
            //重置搜索框
            resetSearch() {
              this.searchDialog = {
                  bookId:undefined,
                  bookName:undefined,
                  status:undefined,
                };
              // this.$refs["form"].resetFields();不知道为什么，走到这里无效
              this.selectByPageAndCondition();
            },
            //管理按钮显示与隐藏
            manage(){
                this.visibleUp=''
                this.visibleDown=''
                this.visibleNoManage=''
                this.visibleCancel=''
                this.visibleManage="none"
            },
            nomanage(){
                this.visibleUp='none'
                this.visibleDown='none'
                this.visibleNoManage='none'
                this.visibleCancel='none'
                this.visibleManage=""
            },
            jumpToBookManage(){
                location.href ="bookManage.html";
            },
            jumpToUserManage(){
                location.href ="userManage.html"
            },
            jumpToOrdersManage(){
                location.href ="ordersManage.html"
            },
            jumpToCategoryManage(){
                location.href = "categoryManage.html"
            },
        },
        data() {
            //自定义图书编号的校验规则 添加表单验证是否存在该编号
            var validateBookNo = (rule, value, callback) => {
                if (value === ''||value===null) {
                    callback(new Error('图书编号不能为空'));

                }else {
                    //    异步搜索
                    new axios({
                        method: "get",
                        url: "/book/no/" + value,
                    }).then(resp => {
                        var result = resp.data;
                        console.log(result);
                        if (result) {
                            callback(new Error('图书编号已存在'));
                        }
                        callback();
                    })
                }
            }
            return {
                localUrl:"http://localhost:8080/image/",
                //标签栏显示在”左侧“
                tabPosition: 'left',
                //当前页码
                currentPage: 1,
                // 每页显示的条数
                pageSize:5,
                // 总记录数
                totalCount:100,
                //选中id
                selectId:'',
                //管理员信息
                Admin:[],
                Admin:{
                    adminName:''
                },
                categoryProps:{
                    lazy:true,
                    lazyLoad(node,resolve){
                        let level=node.level
                        console.log( node.level)
                        let pid = node.level ==0?1:node.value
                        fetch("/category/getById?parentId="+pid).then(res=>res.json()).then(res=>{
                            const nodes=res.map(item =>({
                                value: item.id,
                                label: item.name,
                                leaf: level === 1
                            }))
                            resolve(nodes)
                        })
                    }
                },
                //新增对话框数据接收
                addDialog: {
                    id:'',
                    bookId: '',
                    bookName: '',
                    price:'',
                    status:'',
                    author:'',
                    bookImg:'',
                    inventory:'',
                    introduction:'',
                    category:'',
                    categoryName:'',
                    mt:'',
                    st:''
                },
                //编辑对话框数据接收
                editDialog: {
                    id:'',
                    bookId: '',
                    bookName: '',
                    price:'',
                    status:'',
                    author:'',
                    bookImg:'',
                    inventory:'',
                    introduction:'',
                    category:'',
                    categoryName:'',
                    mt:'',
                    st:''
                },
                //图片表单
                formData:{
                    id:'',
                    bookImg:''
                },
                //搜索框数据接受
                searchDialog: {
                    bookId: '',
                    bookName: '',
                    status:'',
                },
                //新增数据对话框显示标志
                addDialogVisible: false,
                //编辑数据对话框显示标志
                editDialogVisible: false,
                //修改图片对话框显示标志
                bookImgDialogVisible:false,
                //复选框表单数据集合
                multipleSelection:[],
                //按钮管理显示
                visibleManage:'',
                visibleNoManage:'none',
                visibleNew:',',
                visibleUp:'none',
                visibleDown:'none',
                visibleCancel:'none',
                //被选中的表单id集合
                selectIds:[],
                //照片集合
                imageUrl: '',
                limit: 1,
                uploadDisabled: false,//上传框显示标志
                fileList:[],
                form: {
                    dialogImageUrl: "1",//图片预览url
                },
                //提交表单验证
                rules1:{
                    bookId:[
                        {required: true,validator:validateBookNo, trigger: "blur"},
                    ],
                    bookName:[
                        {required: true, message: '书名不能为空'},
                    ],
                    author:[
                        {required: true, message: '作者不能为空'},
                    ],
                    price:[
                        {required: true, message: '单价不能为空'},
                    ],
                    inventory:[
                        {required: true, message: '请输入正整数'},
                    ],
                },
                rules2:{
                    bookName:[
                        {required: true, message: '书名不能为空'},
                    ],
                    author:[
                        {required: true, message: '作者不能为空'},
                    ],
                    price:[
                        {required: true, message: '单价不能为空'},
                    ],
                    inventory:[
                        {required: true, message: '请输入正整数'},
                    ],
                },
                //表格数据初始化
                tableData: [{
                    bookName: '启动服务器中',
                    bookId: '',
                    price: '',
                    quality:'',
                    status: ''
                }],
                //加载动画
                loading: true,
            }
        }
    })
</script>
</body>
</html>

